<template>
  <div style="margin:30px;margin-top:1px">
    <el-row>
      <el-col  :span="4">
        <el-button style="height:30px;line-height:0px;margin-left: 10px;padding-left: 23px;padding-right: 23px;" type="primary" @click="back" plain>返回</el-button>
      </el-col>
    </el-row>
    <h3 style="margin-top:30px">机构信息</h3>
    <el-row>
      <el-col :span="12">
        <el-row class="totality">
          <el-col  :span="8">
            <div class="grid-content bg-purple l-top-50">机构名称</div>
          </el-col>
          <el-col :span="16">
            <div class="grid-content bg-purple r-top-50-0">{{detailData.firmName  || '/'}}</div>
          </el-col>
        </el-row>
        <el-row class="totality">
          <el-col :span="8">
            <div class="grid-content bg-purple l-50">机构法定代表人</div>
          </el-col>
          <el-col :span="16">
            <div  class="grid-content bg-purple r-50-0">{{detailData.firmUser || '/'}}</div>
          </el-col>
        </el-row>
        <el-row class="totality">
          <el-col :span="8">
            <div class="grid-content bg-purple l-50">法定代表人电话</div>
          </el-col>
          <el-col :span="16">
            <div class="grid-content bg-purple r-50-0">{{detailData.firmUserPhone}}</div>
          </el-col>
        </el-row>
        <el-row class="totality">
          <el-col :span="8">
            <div class="grid-content bg-purple l-50">机构类型</div>
          </el-col>
          <el-col :span="16">
            <div class="grid-content bg-purple r-50-0">{{detailData.firmType}}</div>
          </el-col>
        </el-row>
        <el-row class="totality">
          <el-col :span="8">
            <div class="grid-content bg-purple l-50">非营利性机构</div>
          </el-col>
          <el-col :span="16">
            <div class="grid-content bg-purple r-50-0">{{detailData.firmProfit}}</div>
          </el-col>
        </el-row>
        <el-row class="totality">
          <el-col :span="8">
            <div class="grid-content bg-purple l-50">联系人姓名</div>
          </el-col>
          <el-col :span="16">
            <div class="grid-content bg-purple r-50-0">{{detailData.contractUserName}}</div>
          </el-col>
        </el-row>
        <el-row class="totality">
          <el-col :span="8">
            <div class="grid-content bg-purple l-50">联系人电话</div>
          </el-col>
          <el-col :span="16">
            <div class="grid-content bg-purple r-50-0">{{detailData.contactUserPhone}}</div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="12">
        <el-row style="height: 100%">
          <el-col :span="8">
            <div class="grid-content bg-purple l-150 ">机构LOGO</div>
          </el-col>
          <el-col :span="16">
            <div class="grid-content bg-purple r-150"><img style="height:125px" :src="detailData.firmLogo"></div>
          </el-col>
        </el-row>
        <el-row class="totality">
          <el-col :span="8">
            <div class="lgrid-content bg-purple l-200">营业执照及相关材料</div>
          </el-col>
          <el-col :span="16">
            <div class="grid-content bg-purple r-200">
              <el-image  style="height:170px;width:280px" :src="detailData.firmUrlList" :preview-src-list="[detailData.firmUrlList]"></el-image>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <el-row class="totality" >
      <el-col  :span="4" style="height: 100%">
        <div class="grid-content bg-purple l-200">法人身份证</div>
      </el-col>
      <el-col :span="20">
        <div style="border-bottom: 0px solid" class="grid-content bg-purple r-200">
           <el-image v-for="(item,index) in firmUserIdCard" :key="index" style="height:165px;margin-right:20px" :src="item.url?item.url:item" :preview-src-list="[item.url?item.url:item]"></el-image>
        </div>
      </el-col>
    </el-row>

    <el-row class="totality">
      <el-col  :span="4">
        <div class="grid-content bg-purple l-200">培训范围</div>
      </el-col>
      <el-col :span="20">
        <div class="grid-content bg-purple r-200" style="border-bottom: 0px solid #e1e8ef;">{{detailData.trainingScope}}</div>
      </el-col>
    </el-row>

    <el-row class="totality">
      <el-col  :span="4">
        <div class="grid-content bg-purple l-200">机构简介</div>
      </el-col>
      <el-col :span="20">
        <div class="right-r grid-content bg-purple r-200" style="border-bottom: 0px solid #e1e8ef;">{{detailData.introduce}}</div>
      </el-col>
    </el-row>

    <el-row class="totality">
      <el-col  :span="4">
        <div class="left-l grid-content bg-purple l-50">机构官网</div>
      </el-col>
      <el-col :span="20">
        <div class="right-r grid-content bg-purple r-50"   style="border-bottom: 0px solid #e1e8ef;">{{detailData.website}}</div>
      </el-col>
    </el-row>

    <el-row class="totality">
      <el-col  :span="4">
        <div class="left-l grid-content bg-purple l-150">广告图</div>
      </el-col>
      <el-col :span="20">
        <div  class="right-r grid-content bg-purple r-150" style="border-bottom: 0px solid #e1e8ef;">
          <img style="height:120px;margin-right:20px" :src="detailData.firmAdvUrlList"></div>
      </el-col>
    </el-row>

    <el-row class="totality">
      <el-col  :span="4">
        <div class="grid-content bg-purple l-50">所在地</div>
      </el-col>
      <el-col :span="20">
        <div class="grid-content bg-purple r-50">{{detailData.area}}</div>
      </el-col>
    </el-row>

    <el-row class="totality">
      <el-col  :span="4">
        <div class="grid-content bg-purple l-bottom-50">机构地址</div>
      </el-col>
      <el-col :span="20">
        <div class="grid-content bg-purple r-bottom-50">{{detailData.address}}</div>
      </el-col>
    </el-row>

    <h3 v-if="this.$route.params.id === 'W'|| this.$route.params.id === 'Y'" style="margin-top:30px">审批信息</h3>
    <el-row v-if="this.$route.params.id === 'W'|| this.$route.params.id === 'Y'" class="totality">
      <el-col  :span="4">
        <div class="l-bottom-50 grid-content bg-purple">审批人</div>
      </el-col>
      <el-col :span="8">
        <div class="r-bottom-50-0 grid-content bg-purple">{{detailData.resultUser}}</div>
      </el-col><el-col  :span="4">
        <div class="l-bottom-50 grid-content bg-purple">审批时间</div>
      </el-col>
      <el-col :span="8">
        <div class="r-bottom-50 grid-content bg-purple">{{detailData.checkTime}}</div>
      </el-col>
    </el-row>
    <el-row v-if="this.$route.params.id === 'W'" class="totality" >
      <el-col  :span="4" >
        <div class="l-bottom-top-150 grid-content bg-purple">原因</div>
      </el-col>
      <el-col :span="20">
        <div class="r-bottom-150 grid-content bg-purple" >{{detailData.resultContent}}</div>
      </el-col>
    </el-row>

    <el-row style="margin-top: 80px">
      <el-col  :span="10">
        <div>&nbsp;</div>
      </el-col>
      <el-col  :span="6">
        <el-button style="padding-left:50px;padding-right:50px;height:30px;line-height:0px;"  v-if="this.$route.params.id === 'D'"   type="primary"  @click="dataFormSubmit('通过')" >通过</el-button>
        <el-button style="padding-left:50px;padding-right:50px;height:30px;line-height:0px;"  v-if="this.$route.params.id === 'D'"  @click="dataFormSubmit('拒绝')" >拒绝</el-button>
        <el-button style="padding-left:50px;padding-right:50px;height:30px;line-height:0px;"  v-if="this.$route.params.id !== 'D'" type="primary" @click="$router.push({ name: 'check' })" plain>返回</el-button>
      </el-col>
      <el-col :span="10">
        <div>&nbsp;</div>
      </el-col>
    </el-row>
    <!-- 审核拒绝弹窗 -->
    <el-dialog
      title="原因"
      :visible.sync="centerDialogVisible"
      width="30%"
      center>
      <el-input
        type="textarea"
        placeholder="请输入拒绝原因"
        v-model="textarea"
        maxlength="500"
        show-word-limit
        @input="textInputChange"
        size="medium"
      >
      </el-input>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button style="padding-left:50px;padding-right:50px"  @click="centerDialogVisible = false">取 消</el-button> -->
        <el-button style="padding-left:50px;padding-right:50px;height:30px;line-height:0px;"  type="primary" @click="dialogSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>


  export default {
    data() {
      return {
        type: 'D',
        // 获取传递过来的详情数据
        detailData:{},
        // 法人身份证
        firmUserIdCard:[],
        // 广告图
        firmAdvUrlList:[],
        // 审核拒绝是否弹窗
        centerDialogVisible:false,
        // 拒绝输入的原因
        textarea: '',
        // 拒绝还是通过
        result:'',
        // 传递过来的firmid
        firmId:''
      }
    },
    computed: {},
    created() {
     this.type = this.$route.params.id
      console.log('1111111111111',this.$route.params)
      this.firmId=this.$route.params.firmId
      //
      // this.firmUserIdCard=this.detailData.firmUserIdCard.split(',')
      // 
      // 获取机构入驻详情
      this.getDetailData()
    },
    methods: {
      back(){
         this.$router.push({ name: 'check' ,params: {tabbar:this.type} })
      },
       // 获取机构入驻详情
      getDetailData(reportId){
        this.$http({
          url: this.$http.adornUrl('/info/approveDetails?firmId='+this.firmId
          ),
          method: 'post',
          data:{}
        }).then(res=>{
          console.log('获取机构入驻详情的结果取机构入驻详情的结果',res,res.data.code)
          if(res.data.code==0){
            this.detailData=res.data.data.firm 
            //  // // 机构图标格式化
            //   this.detailData.firmLogo=JSON.parse(res.data.data.firm.firmLogo)[0].response?JSON.parse(res.data.data.firm.firmLogo)[0].response.url:JSON.parse(res.data.data.firm.firmLogo)[0].url
            //   // // 营业执照格式化
            //   this.detailData.firmUrlList=JSON.parse(res.data.data.firm.firmUrlList)[0].response?JSON.parse(res.data.data.firm.firmUrlList)[0].response.url:JSON.parse(res.data.data.firm.firmUrlList)[0].url
            //   // // 广告图
            //   this.detailData.firmAdvUrlList=JSON.parse(res.data.data.firm.firmAdvUrlList)[0].response?JSON.parse(res.data.data.firm.firmAdvUrlList)[0].response.url:JSON.parse(res.data.data.firm.firmAdvUrlList)[0].url
               // 法人身份证格式化

              this.firmUserIdCard=res.data.data.firm.firmUserIdCard.split(',')
              console.log('包含里的法人身份证',this.firmUserIdCard)
            // // 判断返回的额格式
            // if(res.data.data.firm.firmUserIdCard.indexOf("[")!= -1 || res.data.data.firm.firmLogo.indexOf("[")!= -1 || res.data.data.firm.firmUrlList.indexOf("[")!= -1 || res.data.data.firm.firmAdvUrlList.indexOf("[")!= -1){
            //   console.log('包含包含',)
              
           
            // }else {
            //     // // 机构图标格式化
            //   this.detailData.firmLogo=res.data.data.firm.firmLogo
            //   // // 营业执照格式化
            //   this.detailData.firmUrlList=res.data.data.firm.firmUrlList
            //   // // 广告图
            //   this.detailData.firmAdvUrlList=res.data.data.firm.firmAdvUrlList
            //   // 法人身份证格式化
            //   let arr=res.data.data.firm.firmUserIdCard.split(',')
            //   this.firmUserIdCard=arr
            //   console.log('不包含里的身份证',arr)
            // }
          }
        })
      },
      // 数据请求函数
      requestSubmit(event){
        var _self=this
        let params={
          firmId:_self.detailData.firmId,
          result:event,
          resultContent:_self.textarea?_self.textarea:'1',
        }
        let content=''
        if(event==1){
          content='确认通过审核吗?'
        }else {
          content='确认拒绝审核吗?'
        }
        this.$confirm(content, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log('获取传递的表单数据',params)
          this.$http({
              url: this.$http.adornUrl('/sys/firm/firmCheck'),
              method: 'post',
              data:params
            }).then(res=>{
              console.log('获去最终审核的结果结果获去最终审核的结果结果',res.data.data)
              if(res.data.code==0){
                this.$message({
                  type: 'success',
                  message: res.data.msg
                });
                this.$router.push({ name: 'check' ,query:{
                  status:event
                }})
              }else {
                this.$message({
                  type: 'error',
                  message: res.data.msg
                });
              }
          })
        }).catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: res.data.msg
          // });          
        });
      },
      // 拒绝原因弹窗确定
      dialogSubmit(){
        this.requestSubmit(2)
        this.centerDialogVisible=false
      },
      // 机构入驻审核确定事件
      dataFormSubmit(data) {
        console.log('获取点击的是通过还是拒绝',data)
        if(data=='通过'){
          this.requestSubmit(1)
        }else {
          this.centerDialogVisible=true
          // this.requestSubmit(2)
        }
        // const imga = require("../../../assets/img/审批完成2.png");
        // this.$alert('<strong><img style="width: 70%;margin-left: 15%;" src='+ imga +'><div style="text-align: center;">审批通过</div></strong>', '审批结果', {
        //   dangerouslyUseHTMLString: true
        // });
      },
      // 拒绝原因输入事件
      textInputChange(event){
        // 输入赋值
        this.textarea=event
        console.log('获取输入的问题',event)
      },
      // 审核拒绝事件
      openText() {
        // 打开原因弹窗
        this.centerDialogVisible=true
        // this.$alert('<textarea rows="15" cols="50">', '原因', {
        //   dangerouslyUseHTMLString: true
        // });
      },
    }
  }
</script>
<style>
    .el-tabs__nav-wrap{
    width: 100% ;
  }
  .el-message-box .el-message-box__btns button{
    /* margin-right: 40%; */
  }
  .el-message-box__btns{
    text-align: center;
  }
  .el-textarea__inner{
    background-color:#F5F5F5;
    height: 150px;
  }
</style>
